<template>
  <el-form ref="smsForm" :model="smsFormData" status-icon :rules="SmsRules" label-width="120px"
    class="demo-smsFormData">
    <el-form-item label="手机号" prop="phone">
      <el-input v-model="smsFormData.phone" type="phone" autocomplete="off" maxlength="11" />
    </el-form-item>
    <div class="box" @click="sendSms">{{ send }}</div>
    <el-form-item label="验证码" prop="code">
      <el-input v-model="smsFormData.code" maxlength="5" />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm(smsForm)" class="btn">
        提交
      </el-button>
      <!-- <el-button @click="resetForm(smsForm)">Reset</el-button> -->
    </el-form-item>
  </el-form>
</template>
<script setup>
//引入组件
import { ElMessage } from 'element-plus';
//引入pinia
import { useUser } from '../../store/users';
//引入api
import * as api from '../../api/users';
import { useRouter } from 'vue-router';
import { reactive, ref, onUnmounted } from 'vue';
import {
  SmsRules,
  userSubmitForm
} from '../../pages/composition/login/validator';
const smsForm = ref();

let userStore = useUser();
const smsFormData = reactive({
  phone: '',
  code: ''
});
//声明路由跳转
let router = useRouter();
let validateSuccess = () => {
  //发起登陆请求
  try {
    api.smsApi(smsFormData.code).then((res) => {
      //存储token
      sessionStorage.setItem('qf-token', res.data.token);
      //存储用户信息到pinia
      console.log(res.data.userInfo);
      userStore.$patch(res.data.userInfo);
      router.push('/');
      console.log(11);
    });
  } catch (e) {
    console.log(e);
  }
  console.log('校验成功');
};
let validateFailed = () => {
  console.log('校验失败');
};
let submitForm = userSubmitForm(validateSuccess, validateFailed);

//1.输入手机号点击按钮获取短信验证码,发起请求

//2.校验短信验证码,获取登入请求

/**
 * @param {Number} time  接收的倒计时初始值
 * @param {String} last  点击验证码后的初始值
 * @param {String} text  传递的点击以后倒计时后面显示的文字
 */
//声明点击验证码的初始值
let send = ref('点击发送验证码');

//点击 短信开始倒计时
//应用开关的思想解决用户吃饱了撑的频繁点击造成的问题
let flag = false;
let sendSms = async () => {
  //调用倒计时的方法
  if (!flag) {
    //用户点击以后发起获取验证码请求
    try {
      let res = await api.getSmsCodeApi(smsFormData.phone);
      // console.log(res);
      //开关打开以后用户无法点击但是倒计时结束以后没有打开还是不能点击,这个时候只能用传入回调函数的方式来解决这个问题
      countDown(3, send.value, '秒后重新发送', () => {
        flag = false;
      });
      ElMessage({
        message: '短信发送成功',
        type: 'success'
      });
    } catch (e) {
      console.log(e);
      flag = false;
      ElMessage({
        message: e,
        type: 'error'
      });
      return;
    }
  }
  //表示用户点击了以后打开开关让用户无法点击
  flag = true;
};
let timer = null;
let countDown = (time, last, text, callback) => {
  send.value = (time + '').padStart(2, 0) + text;
  timer = setInterval(() => {
    time--;
    send.value = (time + '').padStart(2, 0) + text;
    if (time < 1) {
      clearInterval(timer);
      send.value = last;
      callback && callback();
    }
    // console.log(time);
  }, 1000);
};

//切换到其他页面定时器还是在动,在卸载钩子函数中清除定时器
onUnmounted(() => {
  if (timer) clearInterval(timer);
});
</script>

<style scoped>
.btn {
  width: 400px;
  color: blue;
  background-color: hotpink;
}

.box {
  cursor: pointer;
  position: absolute;
  top: 189px;
  right: 87px;
  width: 120px;
  height: 32px;
  line-height: 32px;
  text-decoration: underline;
  background-color: white;
  z-index: 113;
  user-select: none;
}
</style>
